import { Button, Modal, Space } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'

import styles from './spuDialog.module.css'

export default defineComponent({
  name: 'SpuDialog',
  setup() {
    const showDialog = ref(false)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        align: 'center',
        columns: [
          {
            title: '套餐id',
            field: '',
            minWidth: 100
          },
          {
            title: '商品名称',
            field: '',
            minWidth: 200
          },
          {
            title: '杯型',
            field: '',
            minWidth: 80
          },
          {
            title: '第三方价格',
            field: '',
            minWidth: 150
          },
          {
            title: '我方价格',
            field: '',
            minWidth: 150
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 150
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })
    function openDialog() {
      showDialog.value = true
    }

    function handleSetupPrice() {}

    return {
      showDialog,
      tableRef,
      tableConfig,
      openDialog,
      handleSetupPrice
    }
  },
  render() {
    return (
      <Modal
        v-model:visible={this.showDialog}
        footer={null}
        width={'800px'}
        wrapClassName={styles.scoreDialog}
      >
        <ProTable
          ref="tableRef"
          v-slots={{
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleSetupPrice()}
                >
                  设置价格
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </Modal>
    )
  }
})
